<!DOCTYPE html>
  <html>

    <head>
      <meta charset="UTF-8" />
      <title>Hello World</title>
      <script src="src/lib/react.min.js"></script>
      <script src="src/lib/react-dom.min.js"></script>
      <script src="src/lib/babel.min.js"></script>
      <script src="src/jsx/Clock.jsx" type="text/babel"></script>
      <script src="src/jsx/ActionLink.jsx" type="text/babel"></script>
      <script src="src/jsx/Toggle.jsx" type="text/babel"></script>
      <script src="src/jsx/LoggingButton-bad.jsx" type="text/babel"></script>
      <script src="src/jsx/Greeting.jsx" type="text/babel"></script>
      <!--<script src="src/jsx/LoginControl.jsx" type="text/babel"></script>-->

    </head>

    <body>
      <div id="root">
        <div id="clock"></div>
        <div id="actionLink"></div>
        <div id="toggle"></div>
        <div id="loggingButton"></div>
        <div id="welcome"></div>
        <div id="login"></div>

      </div>

      <!--<script type="text/babel">
        function Clock(props) {
          return (
            <div>
              <h1>Hello, world!</h1>
              <h2>It is {props.date.toLocaleTimeString()}.</h2>
            </div>
          );
        }
        function tick() {
      
          ReactDOM.render(<Clock date={new Date()}/> , document.getElementById('root'));
        }
        setInterval(tick, 1000);
      </script>-->

      <!--<script type="text/babel">

        function Avatar(props) {
          return(
            <img className="Avatart"
              src={props.user.avatarUrl}
              alt={props.user.name}
          );
        }

        function UserInfo(props) {
          return (
            <div className="UserInfo>
              <Avatar user={props.user} />
              <div className="UserInfo-name">
                {props.user.name}
              </div>
            </div>
          );
        }

        function Comment(props) {
          return (
            <div className="Comment">
                <UserInfo user={props.author} />

                <div className="UserInfo-text">
                  {props.text}
                </div>
                <div className="UserInfo-date">
                  {formatDate(props.date)}
                </div>
            </div>
          );
        }

        function Welcome(props) {
          return <h1>Hello, {props.name}</h1>
        }
        function App() {
          return (
            <div>
              <Welcome name="Sara"/>
              <Welcome name="A"/>
              <Welcome name="B"/>
              
            </div>
          );
        }
        const element = <App/>;

        ReactDOM.render(element, document.getElementById("root"));

      </script>-->

      

    </body>

  </html>